<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .tab_wrap {
      width: 100%;
      display: flex;
      overflow: hidden;
    }

    .tab_left {
      width: 200px;
      background: darkcyan;
      height: 100vh;
      padding-top: 50px;
      box-sizing: border-box;
      cursor: pointer;
    }

    .tab_left .active {
      background: darkorchid;
      color: white;
    }

    .tab_left li {
      height: 60px;
      line-height: 60px;
      width: 200px;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      background: cyan;
      border: 1px solid #e5e5e5;
    }

    .tab_right {
      flex: 1;
      background: skyblue;
    }

    .tab_right>div {
      width: 100%;
      display: none;
    }

    .tab_right .show {
      display: block;
    }
  </style>
</head>

<body>
  <div class="tab_wrap">
    <ul class="tab_left">
      <li class="active">首页</li>
      <li>添加用户</li>
      <li>用户列表</li>
      <li>用户查询</li>
    </ul>
    <div class="tab_right">
      <div class="show">首页</div>
      <div>
        用户名：<input type="text" id="username">
        <button id="add">添加用户</button>
        <button id="sureEdit">确认修改</button>
      </div>
      <!-- 用户列表-->
      <div>
        <input type="text" id="searchTxt">
        <button id="serchBtn">搜索</button>
        <table border="1">
          <thead>
            <tr>
              <th>用户id</th>
              <th>用户名</th>
              <th>操作</th>
              <th>移动</th>
            </tr>
          </thead>
          <tbody id="mytbody">
            <!-- <tr>
              <td>234</td>
              <td>234</td>
              <td>
                <button class="edit">编辑</button>
                <button class="del">删除</button>
              </td>
            </tr> -->
          </tbody>
        </table>
      </div>
      <div>查询</div>
    </div>
  </div>
  <script>
    // tab切换--------------------------------------------------
    var lis = document.querySelectorAll(".tab_left li")
    var divs = document.querySelectorAll(".tab_right>div")
    for (var i = 0; i < lis.length; i++) {
      lis[i].index = i;
      lis[i].onclick = function () {
        // 让所有的li  去除active的class 让所有div去除show的class
        for (var j = 0; j < divs.length; j++) {
          divs[j].className = ""
          lis[j].className = ""
        }
        // 当前下标的div 加上show的class
        divs[this.index].className = "show"
        // 当前点击的li 加上active的class
        this.className = "active"
      }
    }
    // ------------------------------------------------------------
    // 添加部分 
    var userlist = [] //页面中操作的数据
    if (!localStorage.userlist) {
      localStorage.userlist = JSON.stringify([]); //没有初始localStorage 初始添加[]进去
    } else {
      userlist = JSON.parse(localStorage.userlist) //获取ocalStorage 中的userlist 数据
    }
    var addBtn = document.getElementById("add");
    var usernameEle = document.getElementById("username")//获取输入用户名的输入框
    addBtn.onclick = function () {
      var usernameVal = usernameEle.value; //获取用户名输入框的值
      if (usernameVal) {
        var obj = {
          id: new Date().getTime(), //时间戳作为id
          username: usernameVal
        }
        userlist.push(obj) //把数据放到本页面的操作数据
        localStorage.userlist = JSON.stringify(userlist) //本页面操作完成的最新数据放到localStorage
        loadList(userlist)//添加完成从新渲染列表
        usernameEle.value = ""//清空输入框
      } else {
        alert("用户名不能为空")
      }
    }
    // -----------------------------------------------------------
    // 渲染方法
    loadList(userlist) //首次加载
    function loadList(arr) {
      var mytbody = document.getElementById("mytbody");
      var str = ''
      for (var i = 0; i < arr.length; i++) {
        str += `
          <tr>
              <td>${arr[i].id}</td>
              <td>${arr[i].username}</td>
              <td>
                <button class="edit" onclick=edit(${JSON.stringify(arr[i])})>编辑</button>
                <button class="del" onclick="del(${arr[i].id})">删除</button>
              </td>
              <td>
                <button ${i == 0 ? 'disabled' : ''} onclick="goUPanDown(${arr[i].id},'up')">上移</button>
                <button ${i == arr.length - 1 ? 'disabled' : ''} onclick="goUPanDown(${arr[i].id},'down')">下移</button>
                </td>
            </tr>
        `
      }
      mytbody.innerHTML = str;
    }
    // 删除-----------------------------------------------------------------
    function del(id) {
      for (var i = 0; i < userlist.length; i++) {
        if (id == userlist[i].id) {
          userlist.splice(i, 1)
        }
      }
      localStorage.userlist = JSON.stringify(userlist);
      loadList(userlist)
    }
    // 点击编辑------------------------------------------------------------------------
    var EditId = ""//编辑id
    function edit(ele) {
      username.value = ele.username;
      EditId = ele.id;
      // 点击编辑把tab切换到下标1的显示
      for (var i = 0; i < lis.length; i++) {
        divs[i].className = "";
        lis[i].className = "";
      }
      divs[1].className = "show";
      lis[1].className = "active"
    }
    // 确认修改------------------------------------------
    var sureEdit = document.getElementById("sureEdit")
    sureEdit.onclick = function () {

      for (var i = 0; i < userlist.length; i++) {
        if (EditId === userlist[i].id) {
          userlist[i].username = usernameEle.value; //将原来的数据 修改为输入框最新的值
        }
      }
      localStorage.userlist = JSON.stringify(userlist)
      usernameEle.value = ""
      loadList(userlist)//更新完成从新渲染
    }
    //搜索----------------------------------------
    var serchBtn = document.getElementById("serchBtn");
    var searchTxt = document.getElementById("searchTxt");
    var searchList = [] //搜索到的数据
    serchBtn.onclick = function () {
      searchList = [];//清空上次搜索内容
      var searchVal = searchTxt.value; //搜索的值
      for (var i = 0; i < userlist.length; i++) {
        if (userlist[i].username.indexOf(searchVal) != -1) {
          searchList.push(userlist[i])
        }
      }
      loadList(searchList) //加载搜索到的数组
    }
    // 上移和下移-----------------------------------------
    function goUPanDown(id, status) {
      console.log(id, status)
      for (var i = 0; i < userlist.length; i++) {
        if (userlist[i].id === id) {
          if (status == "up") {
            var temp1 = userlist[i];
            userlist[i] = userlist[i - 1];
            userlist[i - 1] = temp1;
          } else if (status == "down") {
            var temp2 = userlist[i];
            console.log(88888888888888)
            userlist[i] = userlist[i + 1];
            userlist[i + 1] = temp2;
            break;
          }
          // userlist.splice(i, 1)
          // userlist.splice(i - 1, 0, arr[i])
          console.log(userlist)
        }
      }
      loadList(userlist)
    }
    //下移-----------------------------------
    // function goDown(id) {
    //   for (var i = 0; i < userlist.length; i++) {
    //     if (userlist[i].id == id) {
    //       [userlist[i], userlist[i + 1]] = [userlist[i + 1], userlist[i]]
    //       break;
    //       // var temp = userlist[i];
    //       // userlist[i] = userlist[i + 1];
    //       // userlist[i + 1] = temp;
    //     }
    //   }
    //   loadList(userlist)
    // }

  </script>
</body>

</html>